<template>

    <!-- //列表 -->
    <view>

        <view class="card" v-for="item in listData" :key="item.id">
            <view class="card-name">
                <text>代金券</text>
            </view>
            <view class="left-box boxCss" @click="$goNext('/pages/canyuInfo/index')">
                <div class="imgBox">
                     <image src="https://oss.qmxip.com/flash_goods/1156683853423841280.png" mode="aspectFit" />
                </div>
               
                <view class="ticketInfo">
                    <view class="name">
                        <text>{{item.title}}</text>
                    </view>
                    <view class="desc">
                        <view class="f12">{{item.remark}}</view>
                    </view>
                    <view class="remark">
                        <view class="">{{item.describe}}</view>
                    </view>
                </view>
            </view>
            <view class="middle-box"></view>
            <view class="right-box boxCss">
                <view class="middel">
                    <div class="price" :class="{'col-red':item.status == 2}">
                        <text class="min f20 ">￥</text> <text class="big">{{item.money}}</text>
                    </div>
                    <div class="j-btn invite" v-if="item.status == 2" @click="()=>showCode(item)">
                        <text>去使用</text>
                    </div>
                    <div v-else>
                        <view class="tag-btn" :class=" item.status == 1 ? 'hui' : item.status == 3 ? 'green' : 'red' ">
                            {{ item.status == 1 ? '待生效' : item.status == 3 ? '已使用' : '已过期'  }}
                        </view>
                    </div>
                </view>
                <view class="timeout" v-if="item.status == 2">
                    <text>{{ item.endTimeShow}}到期</text>
                </view>
            </view>
        </view>

    </view>

</template>
<script>



const app = getApp();
export default {
    props:['noHandle','listData'],
    components: {},
    data () {
        return {
 

        }
    },
    onShow () {

        
    },
    onLoad (option) {





    },
    methods: {

        showCode (row) {

            if(this.noHandle) return

            // console.log('哈哈哈哈', row)
            uni.showModal({
                title: '券码',
                content:'请出示券码：'+ row.seqNum,
                showCancel: false,
                confirmColor: '#ff305a',
                success: (res) => {
                    if (res.confirm) {


                    }
                }
            });

        }

    }
}
</script>
<style lang="scss" scoped>

.card {
    // background: linear-gradient(0deg, #ff5404 0%, #ff305a 30%, #ff7023 60%, #ff89a9 100%);
    position: relative;
    width: 100%;
    min-height: 240rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    padding-right: 30%;
    .card-name {
        position: absolute;
        left: 0;
        top: 0;
        background: #ff305a;
        color: #fff;
        border-radius: 14rpx 0 14rpx 0;
        line-height: 38rpx;
        padding: 0 14rpx;
        font-size: 22rpx;
    }
    .boxCss {
        height: 100%;
        border: 1rpx solid #d1d1d1;
        border-radius: 14rpx;
        padding: 30rpx 16rpx;
        display: flex;
    }
    .left-box {
        float: left;
        width: 100%;
        border-right: none;
        .imgBox{
            width: 170rpx;
            height: 200rpx;
            border-radius: 10rpx;
            text-align: center;
             image {
                width: 140rpx;
                height: 200rpx;
                border-radius: 10rpx;
                margin: 0 auto;
            }
        }
       
        .ticketInfo {
            flex: 1;
            padding-left: 20rpx;
            line-height: 1.5;
            .name {
                font-size: 32rpx;
                color: #000;
                height: 84rpx;
                line-height: 1.3;
                // margin-bottom: 6rpx;
            }
            .desc {
                color: #999;
                font-size: 22rpx;
                padding: 12rpx 0 8rpx;
            }
            .remark {
                color: #777;
                font-size: 24rpx;
            }
        }
    }
    .middle-box {
        position: absolute;
        left: 70%;
        top: 0;
        z-index: 2;
        width: 1rpx;
        height: 100%;
        // border-left: 1rpx dashed #d1d1d1;
        background-color: #d1d1d1;
        &::after,
        &::before {
            left: 50%;
            content: " ";
            position: absolute;
            width: 32rpx;
            height: 32rpx;
            background: #fff;
            border-radius: 50%;
            border: 1rpx solid #d1d1d1;
            transform: translateX(-50%);
            z-index: 3;
        }
        &::before {
            top: -16rpx;
        }
        &::after {
            bottom: -16rpx;
        }
    }
    .right-box {
        position: absolute;
        right: 0;
        top: 0;
        width: 30%;
        border-left: none;
        .middel {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
            width: 100%;
        }
        .price {
            // color: #dd262d ;
            color: #999;
            .big {
                font-size: 50rpx;
                font-weight: bold;
            }
        }
        .invite {
            display: inline-block;
            // width: 170rpx;
            width: 120rpx;
            margin: 4rpx auto 0;
            font-size: 22rpx;
            height: 54rpx;
            line-height: 54rpx;
            // position: relative;
            // top: -10rpx;
        }
        .tag-btn {
            display: inline-block;
            // width: 170rpx;
            width: 110rpx;
            margin: 4rpx auto 0;
            font-size: 22rpx;
            height: 46rpx;
            line-height: 42rpx;
            border-radius: 2rpx;
            border: 1px dashed currentColor;
            color: #999;
            &.green {
                color: #00af63;
            }
            &.red {
                color: #dd262d;
            }
        }
        .timeout {
            position: absolute;
            bottom: 6rpx;
            width: 100%;
            text-align: center;
            font-size: 20rpx;
            color: #999;
            left: 0;
        }
    }
}
</style>